<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          count: '1',
          num: 1
        }
      },
      methods: {
        addOne(param1, param2) {
          this.count = param1
        }
      },
      // template:`<div><counter :count="count" @addOne="addOne"/></div>`
      template: `<counter v-model:count.uppercase="count" v-model:num="num"/>`
    })
    app.component('counter', {
      props:['count','num'],
      // emits:['addOne'],
      //默认
     /*  props: ['modelValue'],
      props: {
        count: {
          type: String,
          'modelModifiers': {
            default: () => { }
          }
        },
        num:{
          type:Number
        } */

      // },
      /*  emits: {
         addOne: (count) => {
           if (count < 0) {
             return true
           } else {
             return false
           }
         }
       }, */
      methods: {
        addOne() {
          // this.$emit('addOne',2,3)
          // this.$emit('addOne',this.count+3)
         /*  let newValue=this.count+'b';
          if(this.modelModifiers.uppercase){
            newValue=newValue.toUpperCase();
          } */
          this.$emit('update:count', this.count+2)
          this.$emit('update:num', this.num + 3)
        }
      },
      // template:`<div @click="addOne">{{count}}</div>`
      template: `<div @click="addOne">{{count}}-{{num}}</div>`
    })
    const vm = app.mount('#root')
  </script>
</body>

</html>